<!--
  APIexample.html version 1.4.6
  This file is part of OpenAero.

  OpenAero was originally designed by Ringo Massa and built upon ideas
  of Jose Luis Aresti, Michael Golan, Alan Cassidy and many others. 

  OpenAero is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  OpenAero is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with OpenAero.  If not, see <http://www.gnu.org/licenses/>.
  
  --------------------------------------------------------------------
  
  This file is an example of how to use OpenAero functions in your own
  web-based software.
  
  1) all required stylesheets and scripts are loaded.
  2) a body is defined with required OpenAero elements
  3) a script is executed that creates a 300x400 svg image of Form B of
     the 2014 CIVA Unlimited Known sequence
     
  Depending on which functions of OpenAero you want to use, more or less
  scripts need to be loaded and fields or variables defined.
  
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>2014 CIVA Unlimited Known</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <!-- stylesheets -->
      <link rel="stylesheet" type="text/css" href="css/general.css">
      <link rel="stylesheet" type="text/css" href="css/desktop.css" id="mobileDesktopCSS">
      <link rel="stylesheet" type="text/css" href="addtohomescreen/addtohomescreen.css">
      <!-- configuration, must be first js -->
      <script src="config.js" type="text/javascript"></script>
      <!-- interface languages -->
      <script src="languages/en.js" type="text/javascript"></script>
      <!-- logos -->
      <script src="logo.js" type="text/javascript"></script>
      <!-- figure definitions -->
      <script src="figures14.js" type="text/javascript"></script>
      <!-- example sequences -->
      <script src="examples.js" type="text/javascript"></script>
      <!-- improve look of XML output -->
      <script src="vkbeautify.js" type="text/javascript"></script>
      <!-- sprintf for javascript, for formatted language strings -->
      <!-- https://github.com/alexei/sprintf.js -->
      <script src="sprintf.js" type="text/javascript"></script>
      <!-- canvg transforms svg to canvas, used for png output -->
      <!-- https://code.google.com/p/canvg r190 -->
      <script src="canvg/rgbcolor.js" type="text/javascript"></script>
      <script src="canvg/StackBlur.js" type="text/javascript"></script>
      <script src="canvg/canvg.js" type="text/javascript"></script>
      <!-- The main script. Put it at the end when everything else is loaded --> 
      <script src="OpenAero.js" type="text/javascript"></script>
  </head>
  
  <body>
    <!--
      following elements and (hidden) input fields are bare minimum
      for correct functioning of OpenAero
    -->
    
    <div id="svgContainer">
    </div>    
    <textarea id="sequence_text" style="display:none;"></textarea>
    <select name="class" id="class" style="display:none;">
      <option value="powered" class="userText" id="t_powered" selected></option>
      <option value="glider" class="userText" id="t_glider"></option>
    </select>
    <input type=hidden id="default_view" value="B">
    <input type=hidden id="logo" value="CIVA">
    <input type=hidden id="language" value="en">
    <input type=hidden id="oa_version" value="1.4.6">
    <input type="checkbox" id="numberInCircle" style="display:none;">
    <input type="checkbox" id="nonArestiRolls" style="display:none;">
    <input type="checkbox" id="newTurnPerspective" style="display:none;">
    <input type="hidden" id="rollFontSize" value="20">
    <!-- end minimum fields -->
    
    <!-- this svg will show a resized sequence -->
    <svg id="svg" width=300 height=400></svg>
  </body>
  
  <!-- script to create example sequence image -->
  <script type="text/javascript">
    // variables that must be set to prevent errors
    sequenceText = document.getElementById('sequence_text');
    sportingClass = document.getElementById('class');
    newTurnPerspective = document.getElementById('newTurnPerspective');
    activeForm = 'B';
    miniFormA = false;
    
    /**
    Set DOMContentLoaded event
    This one will show the 2014 CIVA Unlimited Known sequence
    in the svgContainer
    */            
    document.addEventListener(
      "DOMContentLoaded",
      function () {
        // set essential variables
        updateUserTexts();
        parseFiguresFile();
        
        // activate a sequence
        activateXMLsequence (exampleSequences['2014 CIVA Unl Known'], true);
        
        // get sequence svg element
        var svgEl = document.getElementById('sequenceSvg');
        
        // resize
        svgEl.setAttribute('width', '300');
        svgEl.setAttribute('height', '400');
        
        // put in svg variable
        var svg = new XMLSerializer().serializeToString(svgEl);
        
        // remove original svg
        svgEl.parentNode.removeChild(svgEl);
        
        // make static svg from variable, this prevents drag & drop
        var staticSVG = document.getElementById('svg');
        staticSVG.innerHTML = svg;
      },
      false
    );
  </script>
</html>
